home *** CD-ROM | disk | FTP | other *** search
/ PC Active 2009 June / PC Active NR.226.iso / intface / scripts / AnimatedFader.js next >
Encoding:
JavaScript  |  2008-01-31  |  9.6 KB  |  337 lines
  1. /*******************************************************************
  2. *
  3. * File    : AnimatedFader.js
  4. *
  5. * Created : 2000/05/28
  6. *
  7. * Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
  8. *
  9. * Purpose : To create fading text descriptions
  10. *
  11. * History
  12. * Date         Version        Description
  13. *
  14. * 2000-05-28    1.0        Initial version. Based on the State Transition
  15. *                    Diagram created for animated rollovers I
  16. *                    modified the code to fade text.
  17. * 2000-05-29    1.1        I did not follow the STD correctly and introduced
  18. *                    a bug that left objects in the ON state.
  19. *                    This is now corrected.
  20. * 2000-06-07    1.2        Introduced a start colour so that the script
  21. *                    can be used on different backgrounds.
  22. *                    Change the var AnimationRunning and FrameInterval
  23. *                    so they don't conflict with animate2.js
  24. * 2000-08-09    1.3        Added Gecko ( Netscape 6 Preview Release 1 ) support
  25. *                    - Ken workman k.workman@3DASA.com
  26. * 2000-10-15    1.4        Modified to make Netscpe 6 (PR3) more efficient
  27. *                    by just changing the color instead of replacing
  28. *                    the whole content of the DIV.
  29. ***********************************************************************/
  30. /*** Create some global variables ***/
  31. var FadingObject = new Array();
  32. var FadeRunning=false;
  33. var FadeInterval=30;
  34.  
  35.  
  36. FadingText('fade1', 10,"FFFFFF");
  37.  
  38. FadeInterval=30;
  39. /*******************************************************************************/
  40. /*** These are the simplest HEX/DEC conversion routines I could come up with ***/
  41. /*** I have seen a lot of fade routines that seem to make this a             ***/
  42. /*** very complex task. I am sure somene else must've had this idea          ***/
  43. /*******************************************************************************/
  44. var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
  45. function dec2hex(dec)
  46. {
  47.     return(hexDigit[dec>>4]+hexDigit[dec&15]);
  48. }
  49. function hex2dec(hex)
  50. {
  51.     return(parseInt(hex,16))
  52. }
  53. /******************************************************************************************/
  54.  
  55. /***********************************************************
  56. * Function   : createFaderObject
  57. *
  58. * Parameters : theDiv   - The name of the DIV in which to fade the text
  59. *              numSteps - The number of steps to use in the fade.
  60. *               startColor - The background colour of the page.
  61. *              
  62. * Description : Creates an object that can hold the current
  63. *               state of the fade animation for a particular DIV
  64. ***********************************************************/
  65. function createFaderObject(theDiv, numSteps, startColor)
  66. {
  67.     if(!startColor)
  68.         startColor = "000000";
  69.         
  70.     this.name        = theDiv;
  71.     this.text        = null;
  72.     this.color        = "FFFFFF";
  73.     this.next_text    = null;
  74.     this.next_color    = null;
  75.     this.state        = "OFF";
  76.     this.index        = 0;
  77.     this.steps        = numSteps;
  78.     this.r        = hex2dec(startColor.slice(0,2));
  79.     this.g        = hex2dec(startColor.slice(2,4));
  80.     this.b        = hex2dec(startColor.slice(4,6));
  81. }
  82.  
  83. /***********************************************************
  84. * Function   : FadingText
  85. *
  86. * Parameters : theDiv   - The name of the DIV in which to fade the text
  87. *              numSteps - The number of steps to use in the fade.
  88. *              
  89. * Description : Library function to be called from the main HTML.
  90. *                Creates an object that can hold the current
  91. *               state of the fade animation for a particular DIV
  92. ***********************************************************/
  93. function FadingText(theDiv, numSteps, startColor)
  94. {
  95.     FadingObject[theDiv] = new createFaderObject(theDiv, numSteps, startColor);
  96. }
  97. /*****************************************************************
  98. * Function    : start_fading
  99. *
  100. * Description : If the FadeAnimation loop is not currently running
  101. *                then it is started.
  102. *****************************************************************/
  103. function start_fading()
  104. {
  105.     if(!FadeRunning)
  106.         FadeAnimation();
  107. }
  108. /*****************************************************************
  109. * Function    : set_text
  110. *
  111. * Description : In the new W3C DOM model we need only set the text
  112. *            once, after that we can just change the colour
  113. *****************************************************************/
  114. function set_text(f)
  115. {
  116.     if(navigator.appName.indexOf("Netscape") != -1
  117.         && document.getElementById)
  118.     {
  119.         var theElement = document.getElementById(f.name);
  120.         var newRange   = document.createRange();
  121.         newRange.setStartBefore(theElement);
  122.         var strFrag    = newRange.createContextualFragment(f.text);    
  123.  
  124.         while (theElement.hasChildNodes())
  125.             theElement.removeChild(theElement.lastChild);
  126.         theElement.appendChild(strFrag);
  127.         theElement.style.color="#"+f.startColor;
  128.     }
  129. }
  130. /*****************************************************************
  131. *
  132. * Function   : getColor
  133. *
  134. * Parameters : f - the fade object for which to calculate the colour.
  135. *
  136. * Description: Calculates the color of the link depending on
  137. *               how far through the fade we are.
  138. *
  139. *****************************************************************/
  140. function getColor(f)
  141. {
  142.     var r=hex2dec(f.color.slice(0,2));
  143.     var g=hex2dec(f.color.slice(2,4));
  144.     var b=hex2dec(f.color.slice(4,6));
  145.  
  146.     r2= Math.floor(f.r+(f.index*(r-f.r))/(f.steps) + .5);
  147.     g2= Math.floor(f.g+(f.index*(g-f.g))/(f.steps) + .5);
  148.     b2= Math.floor(f.b+(f.index*(b-f.b))/(f.steps) + .5);
  149.  
  150.     return("#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2));
  151. }
  152. /*****************************************************************
  153. *
  154. * Function   : setColor
  155. *
  156. * Parameters : fadeObj   - The TextFader object to set
  157. *
  158. * Description: Gets the color of the text and writes it to
  159. *               the DIV.
  160. *
  161. *****************************************************************/
  162. function setColor(fadeObj)
  163. {
  164.     var theColor=getColor(fadeObj);
  165.     var str="<FONT COLOR="+ theColor + ">" + fadeObj.text + "</FONT>";
  166.     var theDiv=fadeObj.name;
  167.     
  168. //if IE 4+
  169.     if(document.all)
  170.     {
  171.         document.all[theDiv].innerHTML=str;
  172.     }    
  173. //else if NS 4
  174.     else if(document.layers)
  175.     {
  176.         document.nscontainer.document.layers[theDiv].document.write(str);
  177.         document.nscontainer.document.layers[theDiv].document.close();
  178.     }
  179. //else if NS 6 (supports new DOM, may work in IE5) - see Website Abstraction for more info.
  180. //http://www.wsabstract.com/javatutors/dynamiccontent4.shtml
  181.     else if (document.getElementById)
  182.     {
  183.         theElement = document.getElementById(theDiv);
  184.         theElement.style.color=theColor;
  185.     }
  186.     
  187. }
  188. /*****************************************************************
  189. *
  190. * Function   : fade_up
  191. *
  192. * Parameters : theDiv  - The div in which to display the text
  193. *               newText - The text to display when faded in
  194. *               newColor- The color the text will be.
  195. *
  196. * Description: Depending on the current "state" of the fade
  197. *               this function will determine the new state and
  198. *               if neccessary, start the fade effect.            
  199. *
  200. *****************************************************************/
  201. function fade_up(theDiv, newText, newColor)
  202. {
  203.     var f=FadingObject[theDiv];
  204.  
  205.     if(newColor == null)
  206.         newColor="FFFFFF";
  207.  
  208.     if(f.state == "OFF")
  209.     {
  210.         f.text  = newText;
  211.         f.color = newColor;
  212.         f.state = "FADE_UP";
  213.         set_text(f);
  214.         start_fading();
  215.     }
  216.     else if( f.state == "FADE_UP_DOWN"
  217.         || f.state == "FADE_DOWN"
  218.         || f.state == "FADE_DOWN_UP")
  219.     {
  220.         if(newText == f.text)
  221.             f.state = "FADE_UP";
  222.         else
  223.         {
  224.             f.next_text  = newText;
  225.             f.next_color = newColor;
  226.             f.state      = "FADE_DOWN_UP";
  227.         }
  228.     }
  229. }
  230. /*****************************************************************
  231. *
  232. * Function   : fade_down
  233. *
  234. * Parameters : theDiv  - The div in which to display the text
  235. *
  236. * Description: Depending on the current "state" of the fade
  237. *               this function will determine the new state and
  238. *               if neccessary, start the fade effect.            
  239. *
  240. *****************************************************************/
  241. function fade_down(theDiv)
  242. {
  243.     var f=FadingObject[theDiv];
  244.  
  245.     if(f.state=="ON")
  246.     {
  247.         f.state="FADE_DOWN";
  248.         start_fading();
  249.     }
  250.     else if(f.state=="FADE_DOWN_UP")
  251.     {
  252.         f.state="FADE_DOWN";
  253.         f.next_text = null;
  254.     }
  255.     else if(f.state == "FADE_UP")
  256.     {
  257.         f.state="FADE_UP_DOWN";
  258.     }
  259. }
  260. /*******************************************************************
  261. *
  262. * Function    : Animate
  263. *
  264. * Description : This function is based on the Animate function
  265. *                of animate.js (animated rollovers).
  266. *                Each fade object has a state. This function
  267. *                modifies each object and changes its state.
  268. *****************************************************************/
  269. function FadeAnimation()
  270. {
  271.     FadeRunning = false;
  272.     for (var d in FadingObject)
  273.     {
  274.         var f=FadingObject[d];
  275.  
  276.         if(f.state == "FADE_UP")
  277.         {
  278.             if(f.index < f.steps)
  279.                 f.index++;
  280.             else
  281.                 f.index = f.steps;
  282.             setColor(f);
  283.  
  284.             if(f.index == f.steps)
  285.                 f.state="ON";
  286.             else
  287.                 FadeRunning = true;
  288.         }
  289.         else if(f.state == "FADE_UP_DOWN")
  290.         {
  291.             if(f.index < f.steps)
  292.                 f.index++;
  293.             else
  294.                 f.index = f.steps;
  295.             setColor(f);
  296.  
  297.             if(f.index == f.steps)
  298.                 f.state="FADE_DOWN";
  299.             FadeRunning = true;
  300.         }
  301.         else if(f.state == "FADE_DOWN")
  302.         {
  303.             if(f.index > 0)
  304.                 f.index--;
  305.             else
  306.                 f.index = 0;
  307.             setColor(f);
  308.  
  309.             if(f.index == 0)
  310.                 f.state="OFF";
  311.             else
  312.                 FadeRunning = true;
  313.         }
  314.         else if(f.state == "FADE_DOWN_UP")
  315.         {
  316.             if(f.index > 0)
  317.                 f.index--;
  318.             else
  319.                 f.index = 0;
  320.             setColor(f);
  321.  
  322.             if(f.index == 0)
  323.             {
  324.                 f.text      = f.next_text;
  325.                 f.color     = f.next_color;
  326.                 f.next_text = null;
  327.                 f.state     ="FADE_UP";
  328.                 set_text(f);
  329.             }
  330.             FadeRunning = true;
  331.         }
  332.     }
  333.     /*** Check to see if we need to animate any more frames. ***/
  334.     if(FadeRunning)
  335.         setTimeout("FadeAnimation()", FadeInterval);
  336.  
  337. }